<template>
  <!-- SKU 选择的提示框 -->
  <detail-cell label="选择" :value="value" />
</template>

<script setup>
  import { computed } from 'vue';
  import detailCell from './detail-cell.vue';

  const props = defineProps({
    modelValue: {
      type: Array,
      default() {
        return [];
      },
    },
    sku: {
      type: Object
    }
  });
  
  const value = computed(() => {
    // 修改：租赁商品默认显示"请选择商品规格"
    if (!props.sku?.id || !props.sku?.properties || props.sku.properties.length === 0) {
      return '请选择商品规格';
    }
    
    let str = '';
    props.sku.properties.forEach((property, index) => {
      // 修改：优化显示格式，数字在前，单位在后（如：7天）
      if (property.propertyName && property.valueName) {
        // 如果属性名是"天"，则显示为"7天"格式
        if (property.propertyName === '天') {
          str += property.valueName + property.propertyName;
        } else {
          // 其他属性保持原格式：属性名:属性值
          str += property.propertyName + ':' + property.valueName;
        }
        
        // 如果不是最后一个属性，添加空格分隔
        if (index < props.sku.properties.length - 1) {
          str += ' ';
        }
      }
    });
    
    return str;
  });
</script>
